<!--
 * @Description: 救援单维护-选择客户
 * @Autor: 刘诗文
 * @Date: 2020-11-17 16:34:19
 * @LastEditors: 刘诗文
 * @LastEditTime: 2021-01-06 15:34:12
-->
<template>
  <div>
    <TopFilter :list="topFilterList" :cols="3" :labelWidth="60" @filterChange="changeHandle"></TopFilter>
    <FilterTable
      ref="table"
      height="500"
      selectionType="single"
      :columns="columns"
      :fetchapi="fetchapi"
      :params="fetchParams"
      :datakey="'rows'"
      columnsRef="selectCustomerlsw"
      :onColumnsChange="columns => (this.columns = columns)"
      :onRowSelectChange="onRowSelectChange"
    ></FilterTable>
    <div
      :style="{
        position: 'absolute',
        left: 0,
        bottom: 0,
        right: 0,
        zIndex: 9,
        borderTop: '1px solid #e9e9e9',
        padding: '10px 20px',
        background: '#fff',
        textAlign: 'right'
      }"
    >
      <el-button @click="closeHandler">关闭</el-button>
      <AjaxButton type="primary" :click="saveHandler">保存</AjaxButton>
    </div>
  </div>
</template>
<script>
import { getOwnerInfo } from '@/api/customerRepair/vehicleOwnerManagement/vehicleChange';

import { notifyAction, isFormEmpty } from '@/utils';
export default {
  name: 'selectCustomer',
  data() {
    this.selectedRow = null;
    return {
      topFilterList: this.createTopFilterList(),
      columns: this.createTableColumns(),
      fetchapi: getOwnerInfo,
      fetchParams: {},
      formData: {}
    };
  },
  methods: {
    createTopFilterList() {
      return [
        {
          type: 'INPUT',
          label: '客户编号',
          fieldName: 'ownerNo',
          initialValue: ''
        },
        {
          type: 'INPUT',
          label: '客户名称',
          fieldName: 'ownerName',
          initialValue: ''
        },
        {
          type: 'INPUT',
          label: '车牌号',
          fieldName: 'license',
          initialValue: ''
        },
        {
          type: 'INPUT',
          label: 'VIN',
          fieldName: 'vin',
          initialValue: ''
        }
      ];
    },
    createTableColumns() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 70,
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '客户编号',
          dataIndex: 'ownerNo',
          width: '120',
          showOverFlowToolTip: true,
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '客户名称',
          dataIndex: 'ownerName',
          width: '120',
          showOverFlowToolTip: true,
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '车牌号',
          dataIndex: 'license',
          width: '120',
          showOverFlowToolTip: true,
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '电话',
          dataIndex: 'mobile',
          width: '120',
          showOverFlowToolTip: true,
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: 'vin',
          dataIndex: 'vin',
          width: '120',
          showOverFlowToolTip: true,
          sorter: true,
          filter: true,
          filterType: 'input'
        }
      ];
    },
    changeHandle(val) {
      this.fetchParams = Object.assign({}, val);
    },
    collapseHandle() {
      this.$nextTick(this.BaseTable.EXECUTE_RESET_HEIGHT);
    },
    onRowSelectChange(row) {
      if (!row.length) {
        this.selectedRow = null;
      } else {
        this.selectedRow = row[0];
      }
    },
    // 保存
    async saveHandler() {
      if (isFormEmpty(this.selectedRow)) {
        return notifyAction('请选择一条数据', 'warning');
      }
      this.$emit('customerChange', this.selectedRow);
    },
    // 关闭
    closeHandler(data) {
      this.$emit('close', false, data);
    }
  }
};
</script>
<style lang="less" scoped></style>
